
<% content_for :head do -%>
  <%= stylesheet_link_tag 'product_page.css' %>
<% end %>
<div class=''>
<div id='product' class=''>

  <div class=' clearfix'>
    <% if @product.active_variants.empty? %>
      <div id='no-variant-available' class=' four large-4 last'>
        Sorry this product is not currently available.
      </div>
    <% else %>

      <div id='left_product_wrapper' class='columns five large-5'>

          <% if @product.images.size >= 1 %>
            <div class="orbit" role="region" aria-label="<%=@product.name %>" data-orbit data-use-m-u-i="false">
              <ul class="orbit-container">
                <button class="orbit-previous"><span class="show-for-sr">Previous</span>&#9664;&#xFE0E;</button>
                <button class="orbit-next"><span class="show-for-sr">Next</span>&#9654;&#xFE0E;</button>
                <% @product.images.each_with_index do |image, i|%>
                  <li class="<%= 'is-active' if i == 0 %> orbit-slide">
                    <%= image_tag(image.photo.url(:large)) %>
                    <figcaption class="orbit-caption"><%= image.caption || @product.name %></figcaption>
                  </li>
                <% end %>
              </ul>
              <nav class="orbit-bullets">
                <% @product.images.each_with_index do |image, i|%>
                  <button class="<%= 'is-active' if i == 0 %>" data-slide="<%= i %>">
                    <span data-slide="<%= i %>" class="show-for-sr"><%= i %></span>
                    <% if i == 0 %>
                      <span class="show-for-sr">Current Slide</span>
                    <% end %>
                  </button>
                <% end %>
              </nav>
            </div>
          <% elsif @product.images.size == 0 %>
            <ul>
              <li>
                <a><%= image_tag(@product.featured_image(:large)) %></a>
              </li>
            </ul>
          <% end %>

      </div>
      <div id='right_2_product_wrapper' class='six columns large-6 last'>
          <div id='right_product_wrapper' class=''>
            <div class='product_title_name'>
              <%= @product.name %>
            </div>
            <% if @product.active_variants.count > 0 %>
              <div class='product_content'>
                <div class='product_content_price'>
                  <%= number_to_currency @product.active_variants.first.price %>
                </div>

              </div>
              <div id='your_product' class='panel'>
                <% @product.active_variants.each_with_index do |variant, i| %>
                  <div id='variant_<%= variant.id %>'
                       class='tiny button variant_select <%= 'secondary' if i != 0 %> <%= 'selected_variant success' if i == 0 %>'
                       data-variant_id='<%= variant.id %>'>
                    <%= raw variant.product_name %>
                  </div>
                <% end %>
                  <div  class='properties_inner_wrapper ' >
                    <hr/>
                    <%= form_for  @cart_item,
                                  :url  => shopping_cart_items_path(@cart_item),
                                  :html => { :id => 'new_cart_item', :class => 'custom' } do |f| %>
                        <%= f.hidden_field :variant_id %>
                        <div class='four'>
                        Quantity:
                        <%= f.select :quantity, [1,2,3,4], { include_blank: false }, { class: ' ' } %>
                        </div>
                        <div class='add_to_cart_wrapper '>
                          <% unless @product.active_variants.empty? %>
                            <%= link_to 'Add to Cart', '#', id: 'submit_add_to_cart', class: 'small button' %>
                          <% end %>
                        </div>
                    <% end %>
                  </div>
                  <div  class='clearfix' style='margin-bottom:20px;' >&nbsp;</div>
              </div>

              <ul id='product-tabs' class='tabs' data-tabs>
                <li class="tabs-title is-active"><a href="#product-description" aria-selected="true">Product</a></li>
                <li class="tabs-title"><a href="#product-properties">Properties</a></li>
              </ul>
              <div class="tabs-content" data-tabs-content="product-tabs">
                <div class="tabs-panel is-active" id="product-description">
                  <% @product.active_variants.each_with_index do |variant, i| %>
                    <% if variant.low_stock? || variant.sold_out? %>
                      <div  class='variant_stock variant_stock_<%= variant.id %> <%= 'is-hidden' if i != 0 %>'>
                        <%= image_tag("ribbons/#{variant.stock_status}_upper_right.png",
                                      :width => 63, :height => 62,
                                      :style => 'border:none;',
                                      :class => 'upper_right_overlay float-right'
                                       ) %>
                        <% if variant.sold_out? && (!current_user || !current_user.requested_to_be_notified?(variant.id)) %>
                          <p>
                          <% if current_user %>
                            <%= link_to 'Notify me', notification_path(variant), data: { confirm: 'Click OK and you will get an email when this product is back in stock.' }, class: 'button tiny alert', style: 'margin-top:15px;', method: :put %> when this product is back in stock.
                          <% else %>
                            <%= link_to 'Notify me', '#', disabled: true, class: 'button tiny disabled', style: 'margin-top:15px;' %><br/>
                            Login to be notified when this product is back in stock.
                          <% end %>
                          </p>
                        <% elsif variant.sold_out? && (current_user && current_user.requested_to_be_notified?(variant.id)) %>
                          <p class='alert callout'><em>You will be notified when this product is back in stock.</em></p>
                        <% end %>
                      </div>
                    <% end %>
                  <% end %>
                  <div><%= raw @product.description %></div>
                </div>
                <div class="tabs-panel" id="product-properties">
                  <% @product.active_variants.each_with_index do |var, i| %>
                    <div id='variant_properties_<%= var.id %>' class='variant_properties <%= 'is-hidden' if i != 0 %>'>
                      <% if var.low_stock? || var.sold_out? %>
                        <div class='variant_stock variant_stock_<%= var.id %> <%= 'is-hidden' if i != 0 %>'>
                          <%= image_tag("ribbons/#{var.stock_status}_upper_right.png",
                                        :width => 63, :height => 62,
                                        :style => 'border:none;',
                                        :class => 'upper_right_overlay float-right'
                                         ) %>
                        </div>
                      <% end %>
                      <ul class='vertical-list'>
                        <% var.variant_properties.each do |prop| %>
                          <li><label><%= prop.property_name %>:</label>  <%= prop.description %></li>
                        <% end %>

                          <% if var.sold_out? && (!current_user || !current_user.requested_to_be_notified?(var.id)) %>
                            <li>
                            <% if current_user %>
                              <%= link_to 'Notify me', notification_path(var), data: { confirm: 'Click OK and you will get an email when this product is back in stock.' }, class: 'button tiny alert', style: 'margin-top:15px;', method: :put %> when this product is back in stock.
                            <% else %>
                              <%= link_to 'Notify me', '#', disabled: true, class: 'button tiny', style: 'margin-top:15px;' %><br/>
                              Login to be notified when this product is back in stock.
                            <% end %>
                            </li>
                          <% end %>
                      </ul>
                    </div>
                  <% end %>
                </div>
              </div>

            <% end %>
            </div>
          </div>
      </div>

    <% end %>
  </div>

</div>
&nbsp;<div class='clearfix' style='height:50px;'>&nbsp</div>
</div>
<div id='generic-dialog'></div>

<% content_for :below_body do -%>
  <%= javascript_include_tag 'shopping/cart.js' %>
  <%= javascript_include_tag 'product_page.js' %>
<% end %>
